import React, { useState } from "react";
import axios from "axios";
import style from "../css/Upload.css";
function Upload({ address }) {
  const [title, setTitle] = useState("");
  const [message, setMessage] = useState("");
  const [price, setPrice] = useState("");
  const [file, setFile] = useState("");
  const [cid, setCid] = useState(null);
  // const [message, setMessage] = useState("");

  // const handleTitleChange = (e) => {
  //   setTitle(e.target.title);
  // };
  // const handleMessageChange = (e) => {
  //   setMessage(e.target.message);
  // };
  // const handleFileChange = (e) => {
  //   setFile(e.target.files[0]);
  // };
  const handleFileUpload = async (e) => {
    try {
      e.preventDefault();

      const formDataSend = new FormData();
      formDataSend.append("title", title);
      formDataSend.append("message", message);
      formDataSend.append("address", address);
      formDataSend.append("price", price);
      formDataSend.append("file", file);

      const response = await axios.post(
        `http://127.0.0.1:3001/upload`,
        formDataSend,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      setCid(response.data.metaData.cid);
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div style={style} className="upload_class">
      <div className="container" style={{ width: "500px" }}>
        <div className="row">
          <div>
            <h1
              className="text-center"
              style={{
                textAlign: "center",
                fontSize: "40px",
                fontFamily: "Courier New, Courier, monospace",
                fontWeight: "bold",
                color: "#F5F5DC",
              }}
            >
              Upload My Pet
            </h1>
            <hr />
            <br />
          </div>
        </div>
      </div>

      <br></br>
      <div className="div-form">
        <form encType="multipart/form-data" onSubmit={handleFileUpload}>
          title:
          <input
            type="text"
            name="title"
            onChange={(e) => setTitle(e.target.value)}
          />
          <br></br>
          message:
          <input
            type="text"
            name="message"
            onChange={(e) => setMessage(e.target.value)}
          />
          <br></br>
          price:
          <input
            type="number"
            name="price"
            onChange={(e) => setPrice(e.target.value)}
          ></input>
          <br></br>
          <input
            type="file"
            name="file"
            accept=".txt, .pdf, .jpg, .png"
            required
            onChange={(e) => setFile(e.target.files[0])}
          />
          <button type="submit" name="submit">
            submit
          </button>
        </form>
      </div>
    </div>
  );
}
export default Upload;
